<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>3d-points</title>
	<style>
		body{
			margin: 0;
			padding:0;
			box-sizing: border-box;
			overflow: hidden;
		}
	</style>
</head>
<body onload="onLoad()">
	<div id="world"></div>
	<script type="x-shader/x-vertex" id="vertexshader">
		attribute float size;
		attribute vec3 position2;
		uniform float val;
		varying vec3 vColor;
		varying float opacity;
		void main() {
			float border = -150.0;
			float min_border = -160.0;
			float max_opacity = 1.0;
			float min_opacity = 0.03;
			float sizeAdd = 20.0;

			vec3 vPos;

			vPos.x = position.x * val + position2.x * (1.-val);
			vPos.y = position.y* val + position2.y * (1.-val);
			vPos.z = position.z* val + position2.z * (1.-val);

			vec4 mvPosition = modelViewMatrix * vec4( vPos, 1.0 );
			if(mvPosition.z > border){
				opacity = max_opacity;
				gl_PointSize = size;
			}else if(mvPosition.z < min_border){
				opacity = min_opacity;
				gl_PointSize = size + sizeAdd;
			}else{
				float percent = (border - mvPosition.z)/(border - min_border);
				opacity = (1.0-percent) * (max_opacity - min_opacity) + min_opacity;
				gl_PointSize = percent * (sizeAdd) + size;
			}
			float positionY = vPos.y;
			vColor.x = abs(sin(positionY));
			vColor.y = abs(cos(positionY));
			vColor.z = abs(cos(positionY));
			gl_Position = projectionMatrix * mvPosition;
		}
	</script>
	<script type="x-shader/x-fragment" id="fragmentshader">
		uniform vec3 color;
		uniform sampler2D texture;
		varying vec3 vColor;
		varying float opacity;
		void main() {
			gl_FragColor = vec4(vColor * color, opacity);
			gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );
		}
	</script>
	<script src="./lib/three.min.js"></script>
	<script src="./lib/stats.min.js"></script>
	<script src="./lib/OrbitControls.js"></script>
	<script src="./lib/tween.min.js"></script>
	<script src="./lib/MTLLoader.js"></script>
	<script src="./lib/OBJLoader.js"></script>
	<script src="./lib/inflate.min.js"></script>
	<script src="./lib/FBXLoader.js"></script>
	<script src="./index.js"></script>
</body>
</html>